<template>
    <div style="margin-top: 8px">
        <el-card class="box-card" style="width: 400px">
            <div slot="header" class="clearfix">
                <span>{{hr.name}}</span>
            </div>
            <div style="display: flex;justify-content: center">
                <img :src="hr.userface" style="width: 100px;height: 100px;border-radius: 50%"/>
            </div>
            <div class="content">
                <div>
                    电话号码：
                    <el-tag size="medium">{{hr.telephone}}</el-tag>
                </div>
                <div>
                    手机号码：
                    <el-tag size="medium">{{hr.phone}}</el-tag>
                </div>
                <div>
                    居住地址：
                    <el-tag size="medium">{{hr.address}}</el-tag>
                </div>
                <div>
                    用户标签：
                    <el-tag style="margin-right: 5px;" type="success" size="medium" v-for="item in hr.roles"
                            :key="item.id">{{item.namezh}}
                    </el-tag>
                </div>
                <div style="display: flex;justify-content: space-around;margin-top: 10px">
                    <el-button type="primary" @click="showUpdateHrInfo">修改信息</el-button>
                    <el-button type="danger" @click="updatePwdVisible = !updatePwdVisible">修改密码</el-button>
                </div>
            </div>
        </el-card>
        <el-dialog :visible.sync="dialogVisible" title="修改信息" width="40%" center>
            <div>
                <table>
                    <tr>
                        <td>
                            <el-tag size="small">用户昵称：</el-tag>
                        </td>
                        <td>
                            <el-input v-model="hr2.name" type="text" size="small"/>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <el-tag size="small">电话号码：</el-tag>
                        </td>
                        <td>
                            <el-input v-model="hr2.telephone" size="small" type="text"/>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <el-tag size="small">手机号码：</el-tag>
                        </td>
                        <td>
                            <el-input v-model="hr2.phone" size="small" type="text"/>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <el-tag size="small">用户住址：</el-tag>
                        </td>
                        <td>
                            <el-input v-model="hr2.address" size="small" type="text"/>
                        </td>
                    </tr>
                </table>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="updateHr">确 定</el-button>
            </div>
        </el-dialog>
        <el-dialog :visible.sync="updatePwdVisible" title="修改密码" width="30%" center>
            <div>
                <el-form :model="pwdInfo" status-icon :rules="rules" ref="ruleForm" label-width="100px">
                    <el-form-item label="旧密码" prop="oldPass">
                        <el-input size="small" type="password" v-model="pwdInfo.oldPass"></el-input>
                    </el-form-item>
                    <el-form-item label="新密码" prop="newPass">
                        <el-input size="small" type="password" v-model="pwdInfo.newPass" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="确认密码" prop="rePass">
                        <el-input size="small" type="password" v-model="pwdInfo.rePass" autocomplete="off"></el-input>
                    </el-form-item>
                </el-form>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button @click="updatePwdVisible = false">取 消</el-button>
                <el-button type="primary" @click="updatePwd">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        name: "HrInfo",
        data: function () {
            var checkPass = (rule, value, callback) => {
                if (!value) {
                    callback(new Error('请输入新密码'))
                } else {
                    //当输入了密码，需要手动再验证两次密码一不一致
                    this.$refs.ruleForm.validateField('rePass')
                    callback()
                }
            }
            var validatePass2 = (rule, value, callback) => {
                if (!value) {
                    callback(new Error('请再次输入密码'));
                } else if (value !== this.pwdInfo.newPass) {
                    callback(new Error('两次输入密码不一致!'));
                } else {
                    callback();
                }
            }
            return {
                hr: {},
                dialogVisible: false,
                hr2: {},
                updatePwdVisible: false,
                pwdInfo: {
                    oldPass: '',
                    newPass: '',
                    rePass: '',
                    hrid: ''
                },
                rules: {
                    oldPass: [{required: true, message: '请输入旧密码', trigger: 'blur'}],
                    newPass: [{validator: checkPass, trigger: 'blur'}],
                    rePass: [{validator: validatePass2, trigger: 'blur'}]
                }
            }
        },
        mounted() {
            this.initHr()
        },
        methods: {
            showUpdateHrInfo: function () {
                this.dialogVisible = true
            },
            updateHr: function () {
                this.$putRequest('/vhr/hr/info', this.hr2)
                    .then(res => {
                        if (res) {
                            this.dialogVisible = false
                            this.$store.commit('chage_hr', this.hr2)
                            this.initHr()
                        }
                    })
            },
            initHr: function () {
                this.$getRequest('/vhr/hr/info')
                    .then(res => {
                        this.hr = res
                        let {...hr2} = res

                        this.hr2 = hr2
                    })
            },
            updatePwd: function () {
                this.$refs.ruleForm.validate((valid) => {
                    if (valid) {
                        // 提交
                        let current_hr = JSON.parse(sessionStorage.getItem('current_hr'))
                        this.pwdInfo.hrid = current_hr.id
                        this.$putRequest('/vhr/hr/pass', this.pwdInfo)
                            .then(res => {
                                if (res) {
                                    // 登出
                                    this.$getRequest('/logout')
                                        .then(res=>{
                                            if (res){
                                                sessionStorage.removeItem('current_hr')
                                                this.$router.replace('/')
                                            }
                                        })
                                }
                            })
                    }
                })
            }
        }
    }
</script>

<style scoped>
    .content div {
        margin-top: 5px;
    }
</style>